<template>
<div class="container">
     <navbar class="navbarb">    
        <navbar-item type="title">
            <text class="headtext">个人信息管理</text>
        </navbar-item>
    </navbar>

    <div class="headInfo">
        <image class="headimgbg" src="https://www.asyke.com/static/img/user_bg.png" style="width:750px;height:100px"></image>
        <div class="avator">
            <image class="avatorImg" src="https://oss.asyke.com/user/1/userInfo/image/0286b87b2f1439b2443f9f5bb7e5f476.png" style="width:162px;height:162px"></image>
        </div>
        <text class="username">撒打算试试的</text>
        <text class="userInfo">华北电力大学(北京)</text>
    </div>
    <div class="continfo">
        <div class="infoItem" @click="enterpage">
            <icon class="infoIconBefore" :eeui="{content:'tb-friend',fontSize:38}"></icon>
            <text class="infoText">个人信息</text>
            <icon class="infoIconAfter" :eeui="{content:'tb-right',fontSize:38}"></icon>
        </div>
        <div class="infoItem" @click="mynews">
            <icon class="infoIconBefore" :eeui="{content:'tb-message',fontSize:38}"></icon>
            <text class="infoText">我的消息</text>
            <icon class="infoIconAfter" :eeui="{content:'tb-right',fontSize:38}"></icon>
        </div>
    </div>
</div>
</template>
<script>

  export default {
      data(){
          return{
              
          }
      },
      methods: {
          enterpage(){
              eeui.openPage({
                    url: 'userPage.js',
                    statusBarColor:'#1eb76e',
                    animated:false,
                }, function(result) {
                    //......
                }); 
          },
          mynews(){
              eeui.openPage({
                    url: 'mynews.js',
                    statusBarColor:'#1eb76e',
                    animated:false,
                }, function(result) {
                    //......
                }); 
          }
        }
  }  
</script>
<style scoped>
.container{
    background-color:#ebebeb;
    
    /* margin-bottom:200px; */
}
.navbarb{
        width: 750px;
        height: 100px;
        background-color: #1eb76e;
    }
.headtext {
        font-size: 30px;
        color: #ffffff;
    }
    .headInfo{
        width:750px;
        height:426px;
        background-color:rgba(46, 217, 125, 0.8);
        position:relative;
    }
    .headimgbg{
        position:absolute;
        bottom:0;
        left:0;
    }
    .username{
        margin-top:20px;
        font-size:30px;
        color: #ffffff;
        text-align: center;
        
    }
    .avator{
       width: 170px;
       height: 170px;
       border-radius:100;
       overflow: hidden;
       align-self: center;
       margin-top: 50;
       background-color: rgba(222, 252, 236, 0.5);
       position: relative;
    }
    .avatorImg{
        position: absolute;
        top: 4px;
        left: 4px;
        border-radius: 100;
    }

    .userInfo{
        width: 336px;
        height: 38px;
        line-height: 38px;
        font-size: 22px;
        color: #c6fade;
        border-color: rgba(244, 244, 244, 0.9);
        border-width: 1px;
        border-style: solid;
        border-radius: 216px;
        align-self: center;
        text-align: center;
        margin-top: 10px;
    }
    .infoItem{
        width: 750;
        height: 96;
        flex-direction: row;
        background-color: #ffffff;
        border-bottom-color: #e0e0e0;
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }
    .infoIconBefore{
        width: 60;
        height: 100;
        margin-left: 20px;
        color: #1eb76e;
    }
    .infoText{
        width: 400;
        line-height: 100;
        font-size: 30;
        margin-left: 10px;
    }
    .infoIconAfter{
        width: 60;
        height: 100;
        margin-left: 170px;
        color: #cfcfcf;

    }
   
</style>